
<template>
  <div class="">
    <div @click="showFun" class="popper-slot">
      <slot name="reference"></slot>
    </div>
    <transition name="drop-down">
      <div class="popover" v-if="showPopper" @click="hideFun">
        <slot> </slot>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue';

let showPopper = ref(false);
let showFun = function () {
  showPopper.value = true;
};
let hideFun = function () {
  showPopper.value = false;
};
</script>

<style lang="less" scoped>
.popper-slot {
  padding-bottom: 20px;
}
.popover {
  position: absolute;
  background: #fff;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 12px;
  z-index: 2000;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  word-break: break-all;
  // transform: translateY(100%);

  &::after {
    width: 14px;
    height: 14px;
    background: #fff;
    content: '';
    position: absolute;
    top: -7px;
    left: 14px;
    transform: rotateZ(45deg);
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    box-shadow: -4px -4px 6 0 rgb(0 0 0 / 10%);
  }
}

.drop-down-enter-from {
  opacity: 0;
  transform: scaleY(0);
}
//  cubic-bezier(0.23, 1, 0.32, 1)
.drop-down-enter-to {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center top;
}
.drop-down-leave-active {
  opacity: 0;
  transform: scaleY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center top;
}
</style>